<template>
<div class="batlist">
    <wxc-minibar class="border-bottom" title="投注记录">
        <!-- <image slot="left" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/back_icon.png" style="height:28px;width:16px;"></image>
        <div class="header-con" slot="middle">
            <text class="header-title">投注记录</text>
        </div> -->
    </wxc-minibar>
    <wxc-tab-page ref="wxc-tab-page" :tab-titles="tabTitles" :tab-styles="tabStyles" title-type="text" :tab-page-height="tabPageHeight" @wxcTabPageCurrentTabSelected="wxcTabPageCurrentTabSelected">
        <list v-for="(v,index) in tabList" :key="index" class="item-container" :style="{ height: (tabPageHeight - tabStyles.height) + 'px' }">
            <!-- <cell class="border-cell"></cell> -->
            <refresh @refresh="onrefresh" class="refresh" :display="refreshing ? 'show' : 'hide'">
                <rotate></rotate>
                <!-- <text style="font-size:28px;">数据加载中。。。</text>
                <loading-indicator class="indicator"></loading-indicator> -->
            </refresh>
            <cell v-for="(item,key) in v" v-if="v&&v.length>0" class="cell" :key="key">
                <div class="content" @click="gobatdetial(item)">
                    <div class="bat_title">
                        <text style="font-family: PingFangSC-Medium;font-size: 32px;color: #333333;margin-right:24px;" >{{ item.scheme.lotteryName}}</text>
                        <text style="font-size: 28px;color: #666666;line-height: 45px;">第{{item.scheme.issue}}期</text>
                        <text style="font-size: 28px;color: #333333;margin-left:72px;" v-if="item.scheme.buyTogether==1">发起人：</text>
                        <text style="font-size: 28px;color: #666666;" v-if="item.scheme.nickName && item.scheme.buyTogether==1">{{item.scheme.nickName | nicknamefilter}}</text>
                        <text style="font-size: 28px;color: #666666;" v-if="item.scheme.nickName  == null&&item.scheme.buyTogether==1">匿名</text>
                    </div>
                    <div class="bat_desc">
                        <div class="bat_desc_fl">
                            <div>
                                <image class="bat_desc_img" :src="item.scheme.lotteryName | typeName"></image>
                            </div>
                            <div class="bat_desc_md">
                                <div class="bat_desc_md_first">
                                    <text style="font-size: 28px;color: #666666;margin-right:24px;">投注金额</text>
                                    <text style="font-family: PingFangSC-Medium;font-size: 28px;color: #E70D0D;margin-right:24px;">{{item.money}}元</text>
                                    <text style="font-family: PingFangSC-Medium;font-size: 28px;color: #076BF2;" v-if="item.issueSum>1">追号</text>
                                    <!-- <text style="font-family: PingFangSC-Medium;font-size: 28px;color: #076BF2;" v-if="item.append===1&&item.lotteryId===2">追加</text> -->
                                </div>
                                <div class="bat_desc_md_second">
                                    <text style="font-size: 24px;color: #B2B2B2;">{{item.createTime | filtertime}}</text>
                                </div>
                            </div>
                        </div>
                        <div class="bat_desc_fr" v-if="item.orderStatus!=4 || item.orderStatus!=3">
                            <text v-if="item.scheme.statusDescribe==101" style="font-family: PingFangSC-Medium;font-size: 30px;color: #333333;">待支付</text>
                            <text v-if="item.scheme.statusDescribe==601" style="font-family: PingFangSC-Medium;font-size: 32px;color: #E70D0D;">{{item.prize}}元</text>
                            <text v-if="item.scheme.statusDescribe==301 && item.payStatus  != 0 && item.orderStatus == 1" style="font-family: PingFangSC-Medium;font-size: 30px;color: #333333;">待开奖</text>
                            <text v-if="item.scheme.statusDescribe==201" style="font-family: PingFangSC-Medium;font-size: 30px;color: #333333;">出票中</text>
                            <text v-if="item.scheme.statusDescribe==501" style="font-family: PingFangSC-Medium;font-size: 30px;color: #A7A7A7;">未中奖</text>
                            <text v-if="item.scheme.statusDescribe==702" style="font-family: PingFangSC-Medium;font-size: 30px;color: #A7A7A7;">过期</text>
                            <text v-if="item.scheme.statusDescribe==703" style="font-family: PingFangSC-Medium;font-size: 30px;color: #A7A7A7;">失效</text>
                            <text v-if="item.scheme.statusDescribe==801" style="font-family: PingFangSC-Medium;font-size: 30px;color: #E70D0D;">出票失败</text>
                            <text v-if="item.scheme.statusDescribe==401" style="font-family: PingFangSC-Medium;font-size: 32px;color: #E70D0D;">{{item.prize}}元</text>
                            <text v-if="item.scheme.statusDescribe==701" style="font-family: PingFangSC-Medium;font-size: 30px;color: #A7A7A7;">撤单</text>
                            <text v-if="item.scheme.statusDescribe==102 && item.payStatus==2" style="font-family: PingFangSC-Medium;font-size: 30px;color: #A7A7A7;">认购中</text>
                            <text v-if="item.scheme.buyTogether==1 && item.payStatus ==0 && item.orderStatus==1" style="font-family: PingFangSC-Medium;font-size: 30px;color: #333333;">待支付</text>
                            <text v-if="item.scheme.buyTogether==1 && item.payStatus ==0 && item.orderStatus ==3" style="font-family: PingFangSC-Medium;font-size: 30px;color: #A7A7A7;">过期</text>
                        </div>
                        <!-- <div class="bat_desc_fr" v-if="item.orderStatus==4 || item.orderStatus==3">
                            <text style="font-family: PingFangSC-Medium;font-size: 30px;color: #A7A7A7;">过期</text>
                        </div> -->
                    </div>
                    <image v-if="item.scheme.statusDescribe==601" class="priceimg" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/alreadyprice.png"></image>
                    <image v-if="item.scheme.statusDescribe==401" class="priceimg" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/zhongjiang.png"></image>
                </div>
            </cell>
            <cell v-if="norecord" class="norecord">
                <image style="width:298.5px;height:298.5px;" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/nobatrecord.png"></image>
                <text style="margin-top:71.7px;font-size: 40px;color: #9E8383;">{{norecordinfo}}</text>
            </cell>
            <loading class="loading" @loading="onloading" :display="loadinging ? 'show' : 'hide'" v-if="!notLoding">
                <rotate></rotate>
                <!-- <loading-indicator class="indicator"></loading-indicator> -->
            </loading>

        </list>
    </wxc-tab-page>
    <loading-big v-if="loadingshow"></loading-big>
    <!-- <wxc-loadingsp :show="loadingshow" type="custom" :need-mask="true" loading-text="加载中..." m-url="http://img.alicdn.com/tfs/TB1Ep_9NVXXXXb8XVXXXXXXXXXX-74-74.gif" m-width="200" m-height="200" m-backgroundcolor="#212021" m-textcolor="#ffffff">
    </wxc-loadingsp> -->
</div>
</template>

<script>
const dom = weex.requireModule("dom");
const modal = weex.requireModule("modal");
let navigator = weex.requireModule("navigator");
import {
    WxcTabPage,
    WxcPanItem,
    Utils,
    BindEnv
} from "weex-ui";
import WxcMinibar from "@/components/modules/wxc-minibar/index.js";
import WxcLoadingsp from "@/components/modules/loading";
import rotate from "@/components/modules/rotate";
import loadingBig from "@/components/modules/loading-big";
import {
    postResponsesToken
} from "@/api.js";
import {
    serialize,
    getBaseUrl
} from "@/utils/index.js";
import Config from "@/tab-bar/topconfig";
import {
    lotteryTypes
} from "@/js/global/index_data"
import {
    debug
} from "util";
export default {
    components: {
        WxcTabPage,
        WxcPanItem,
        WxcMinibar,
        WxcLoadingsp,
        rotate,
        loadingBig
    },
    data: () => ({
        loadingshow: false,
        refreshing: false,
        pagesize: 10, // 一页显示多少条
        pageindex: 1, //当前页
        norecordinfo: "",
        index: 0,
        norecord: false,
        loadinging: false,
        tabTitles: Config.tabTitles,
        tabStyles: Config.tabStyles,
        tabList: [],
        demoList: [],
        tabPageHeight: 1334,
        baseURL: "",
        loadingState:false,
	    notLoding:false

    }),
    filters: {
        filtertime: function (time) {
            let date = new Date(time);
            let y = date.getFullYear();
            let mo = date.getMonth() + 1;
            mo = mo < 10 ? "0" + mo : mo;
            let d = date.getDate();
            d = d < 10 ? "0" + d : d;
            let h = date.getHours();
            h = h < 10 ? "0" + h : h;
            let m = date.getMinutes();
            m = m < 10 ? "0" + m : m;
            let s = date.getMinutes();
            s = s < 10 ? "0" + s : s;
            return y + "-" + mo + "-" + d + " " + h + ":" + m + ":" + s;
        },
        nicknamefilter: function (value) {
            if (value.length > 4) return value.slice(0, 4) + "...";
            return value;
        },

        typeName(name) {
            let arr = [{
                    'name': '双色球',
                    'src': 'http://zhongcai-test.oss-cn-beijing.aliyuncs.com/test-huicai-admin/lotteries/ssq.png'
                },
                {
                    'name': '超级大乐透',
                    'src': 'http://zhongcai-test.oss-cn-beijing.aliyuncs.com/test-huicai-admin/lotteries/dlt.png'
                },
                {
                    'name': '福彩3D',
                    'src': 'http://zhongcai-test.oss-cn-beijing.aliyuncs.com/test-huicai-admin/lotteries/3d.png'
                },
                {
                    'name': '排列3',
                    'src': 'http://zhongcai-test.oss-cn-beijing.aliyuncs.com/test-huicai-admin/lotteries/rx3.png'
                },
                {
                    'name': '排列5',
                    'src': 'http://zhongcai-test.oss-cn-beijing.aliyuncs.com/test-huicai-admin/lotteries/rx5.png'
                }
            ]

            return arr.filter(v => v.name === name)[0].src
        }
    },
    mounted() {
        this.tabPageHeight = Utils.env.getPageHeight();
        this.tabList = [...Array(this.tabTitles.length).keys()].map(i => []);
        this.getresposnedata();
        // 获取路径
        this.baseURL = getBaseUrl(weex.config.bundleUrl, true);

    },
    methods: {
        async getresposnedata(state) {
            this.loadingshow = true
            this.refreshing = true
            
            let param = {
                size: this.pagesize,
                current: this.pageindex,
                type: this.index
            };

            try {
                let res = await postResponsesToken('order/scheme/queryScheme', param)

                let iarr = ["暂无投注记录", "暂无合买记录", "暂无中奖记录"]
                this.loadingshow = false;

                if (res.data.length === 0) {
                    this.norecord = true
                    this.norecordinfo = iarr[+this.index]
                } else {
                    this.norecord = false;
                }

                if (this.pageindex !== 1) this.norecord = false;
                
                let demoList = res.data
                let key = !!state ? demoList : !Array.isArray(this.tabList[this.index]) ? [] :this.tabList[this.index].concat(demoList)
                
                this.$set(this.tabList, this.index, key)
                this.loadingshow = false
                this.refreshing = false
                this.loadinging = false
                this.notLoding = demoList.length < this.pagesize 

            } catch (e) {
                this.loadingshow = false
            }
        },

        onrefresh(event) {
            this.pageindex = 1
            this.getresposnedata(true)
        },
        onloading(event) {
            if( !!this.notLoding) return 
            this.loadinging = true
            this.pageindex++
            this.getresposnedata()

        },
        gobatdetial(item) {
            //  return modal.alert({message:JSON.stringify(item)});
            let lottoname = item.scheme.lotteryName
            // modal.alert({message:JSON.stringify(item)});
            // return;
            if (item.scheme.statusDescribe == 101  && item.orderStatus != 3) {
                //未支付

                let currentTitle = lottoname + item.scheme.issue + "期";

                if (item.scheme.buyTogether == 1) {
                    navigator.push({
                        url: this.baseURL + "views/pay/pay.js?" +
                            serialize({
                                order: item.orderNo,
                                lottotype: currentTitle + "(合买)-跟单",
                                lottoId: lotteryTypes[item.scheme.lotteryNo].id,
                                totalmoney: Number(item.money) + Number(item.scheme.safeguardMoney),
                                money:Number(item.money) + Number(item.scheme.safeguardMoney),
                                lotteryNo: item.scheme.lotteryNo,
                            }),
                        animated: "true"
                    })
                } else {
                    navigator.push({
                        url: this.baseURL + "views/pay/pay.js?" +
                            serialize({
                                order: item.orderNo,
                                lottotype: currentTitle,
                                lottoId: lotteryTypes[item.scheme.lotteryNo].id,
                                totalmoney: Number(item.money),
                                money: +item.money,
                                lotteryNo: item.scheme.lotteryNo
                            }),
                        animated: "true"
                    });
                }
            } else {

                let currentTitle = lottoname + item.scheme.issue + "期";

    
                // 非未支付
                if (item.scheme.buyTogether == 1) {

                    // 是合买且未支付(过期)
                    if (item.scheme.statusDescribe == 102) {
                             

                        //认购
                        if (item.payStatus == 0 && item.orderStatus == 1) {

                            let totalmoney = ((item.scheme.self == 'true') && item.scheme.statusDescribe == 101) ? Number(item.scheme.money) + Number(item.scheme.safeguardMoney) : Number(item.scheme.money)

                            //待支付
                            navigator.push({
                                url: this.baseURL + "views/pay/pay.js?" +
                                    serialize({
                                        from: "batlist",
                                        order: item.orderNo,
                                        lottotype: currentTitle,
                                        lottoId: lotteryTypes[item.scheme.lotteryNo].id,
                                        totalmoney: Number(item.money),
                                        money: +item.money,
                                        lotteryNo: item.scheme.lotteryNo
                                    }),
                                animated: "true"
                            });
                        }

                        if (item.orderStatus == 3 && item.payStatus == 0) {
                            //过期
                            if (item.scheme.self == 'true') {
                                navigator.push({
                                    url: this.baseURL + "views/bat/Lotterysale_detail.js?" +
                                        serialize({
											statusDescribe: 702,
                                            lotteryNo: item.scheme.lotteryNo,
                                            orderNo:item.orderNo,
                                            schemeNumberUnit: item.scheme.schemeNumberUnit,
                                            issueSum: item.scheme.issueSum,
                                            nickname: item.scheme.nickName ? item.scheme.nickName : "匿名",
                                            persontype: 1,
                                            betContent: item.scheme.betContent,
                                            map: JSON.stringify(item.scheme),
                                            // multiple: item.scheme.multiple,
                                            prizeDetails: JSON.stringify(item.scheme)
                                        }),
                                    animated: "true"
                                });
                            }
                        }

                        if (item.payStatus == 2) {                                
                            //认购
                            navigator.push({
                                url: this.baseURL + "views/bat/Lotterysale_detail.js?" +
                                    serialize({
                                        statusDescribe: 102,
                                        lotteryNo: item.scheme.lotteryNo,
                                        orderNo:item.orderNo,
                                        schemeNumberUnit: item.scheme.schemeNumberUnit,
                                        issueSum: item.scheme.issueSum,
                                        nickname: item.scheme.nickName ? item.scheme.nickName : "匿名",
                                        persontype: 1,
                                        betContent: item.scheme.betContent,
                                        map: JSON.stringify(item.scheme),
                                        // multiple: item.multiple,
                                        // prizeDetails: JSON.stringify(item.prizeDetails)
                                    }),
                                animated: "true"
                            });
                        }
                    } else {

                        var persontype = item.scheme.self == 'true' ? 1 : 2

                        navigator.push({
                            url: this.baseURL + "views/bat/Lotterysale_detail.js?" +
                                serialize({
                                    money: item.scheme.money,
                                    persontype: persontype,
                                    statusDescribe: item.scheme.statusDescribe,
                                    schemeNumberUnit: item.scheme.schemeNumberUnit,
                                    issueSum: item.scheme.issueSum,
                                    lotteryNo: item.scheme.lotteryNo,
                                    schemeId: item.scheme.schemeNo,
                                    nickname: item.scheme.nickName ? item.scheme.nickName : "匿名",
                                    betContent: item.scheme.betContent,
                                    map: JSON.stringify(item.scheme),
                                    multiple: item.scheme.sorders[0].multiple,
                                    prizeDetails: JSON.stringify(item.scheme.sorders)
                                }),
                            animated: "true"
                        });
                    }
                } else {

                    navigator.push({
                        url: this.baseURL + "views/bat/numberlotterydetail.js?" +
                            serialize({
                                money: item.scheme.money,
                                statusDescribe: item.scheme.statusDescribe,
                                schemeId: item.scheme.schemeNo,
                                lotteryNo: item.scheme.lotteryNo,
                                betContent: item.scheme.betContent,
                                multiple: item.scheme.sorders[0].multiple,
                                schemeNumberUnit: item.scheme.schemeNumberUnit,
                                issueSum: item.scheme.issueSum,
                                prizeDetails: JSON.stringify(item.scheme.sorders)
                            }),
                        animated: "true"
                    });
                }
            }
        },
        wxcTabPageCurrentTabSelected(e) {
            this.index = e.page;
            this.pageindex = 1;
             this.norecord = false;
            this.getresposnedata(true).then(res => {
                if (res.length === 0) {
                    this.norecord = true;
                } else {
                    this.norecord = false;
                }
                this.$set(this.tabList, this.index, res);
            });
        },
        wxcPanItemPan(e) {
            if (BindEnv.supportsEBForAndroid()) {
                this.$refs["wxc-tab-page"].bindExp(e.element);
            }
        }
    }
};
</script>

<style scoped>
.loading{
    width: 750px;
    display: flex;
    align-items: center;
   
}


.indicator-text {
    color: #888888;
    font-size: 42px;
    text-align: center;
}

.indicator {
    margin-top: 16px;
    height: 40px;
    width: 40px;
    color: blue;
}

.item-container {
    width: 750px;
    background-color: rgb(245, 245, 245);
}

.border-cell {
    background-color: #f2f3f4;
    width: 750px;
    height: 24px;
    align-items: center;
    justify-content: center;
}

.content {
    position: relative;
    margin-bottom: 24px;
    width: 750px;
    background-color: white;
}

.bat_title {
    display: flex;
    margin-left: 32px;
    margin-right: 30px;
    padding-top: 36px;
    padding-bottom: 27px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: rgb(240, 240, 240);
    flex-direction: row;
    align-items: center;
}

.bat_desc {
    height: 168px;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
}

.bat_desc_md {
    margin-left: 32px;
}

.bat_desc_fl {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: 32px;
}

.bat_desc_fr {
    margin-right: 56px;
}

.bat_desc_img {
    width: 108px;
    height: 108px;
}

.bat_desc_md_first {
    display: flex;
    flex-direction: row;
    margin-bottom: 18.4px;
}

.loading {
    width: 750px;
    height: 100px;
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
    background-color: #333;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;
    background-color: #f5f5f5;
}

.refresh {
    width: 750px;
    display: flex;
    align-items: center;
}

.indicator-text {
    color: #888888;
    font-size: 20px;
    text-align: center;
}

.indicator {
    margin-top: 16px;
    height: 40px;
    width: 40px;
    color: gray;
}

/* .header {
    width: 750px;
    height: 90px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  } */
.header-img {
    position: absolute;
    left: 32px;
    top: 34px;
    margin-left: 0;
}

.priceimg {
    width: 200px;
    height: 129px;
    position: absolute;
    right: 60px;
    top: 20px;
}

.norecord {
    padding-top: 158px;
    padding-left: 225.8px;
    padding-right: 225.8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.header-con {
    display: flex;
    justify-content: center;
    position: relative;
    align-items: center;
    flex-direction: row;
}

.header-title {
    font-size: 34px;
    color: #fff;
    font-weight: 600;
    font-family: PingFangSC-Medium;
}

.border-bottom {
    border-bottom-color: #f1f1f1;
    border-bottom-width: 1px;
    border-bottom-style: solid;
}
</style>
